import React, { PureComponent } from 'react';
import { Typography, Popover, Form, Input } from 'antd';
import { withRemove } from './index';
import styles from './index.less';

const { Text } = Typography;

@withRemove
class RankComponent extends PureComponent {
  constructor(props) {
    super(props);
    const { content = { grade: '', desc: '' } } = this.props.data;
    const { grade, desc } = content;
    this.state = { grade, desc };
  }

  handleChange = type => e => {
    const { value } = e.target;
    const { data } = { ...this.props };
    if (!data.content) data.content = {};
    data.content[type] = value;
    this.props.onChange(data);
    this.setState({ [type]: value });
  };

  render() {
    const { grade, desc } = this.state;
    return (
      <Popover
        placement="right"
        trigger="click"
        content={
          <>
            <Form.Item label="评级内容" className={styles.mb0}>
              <Input.TextArea
                rows={5}
                placeholder="输入评级内容"
                value={desc}
                onChange={this.handleChange('desc')}
              />
            </Form.Item>
            <Form.Item label="评级指数" className={styles.mb0}>
              <Input
                placeholder="输入评级指数"
                value={grade}
                onChange={this.handleChange('grade')}
              />
            </Form.Item>
          </>
        }
      >
        <Typography className={styles.rank}>
          <Text type={desc ? '' : 'secondary'} className={styles.wordWrap}>
            {desc || '这里编辑企鹅推荐评级内容'}
          </Text>
          <Text type={grade ? '' : 'secondary'} className={styles.wordWrap}>
            {grade ? `企鹅心选推荐指数：${grade}` : '这里编辑企鹅心选推荐指数'}
          </Text>
        </Typography>
      </Popover>
    );
  }
}

export default RankComponent;
